<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>期末报告</title>
  </head>
 
  <style>
 header p {
    font-size: 50px;
    color:white;
    position: absolute;
    top: 200px;
    left: 36%;
}
li {
            list-style: none;
        } 
            body nav {
            height: 40px;
            background-color: black;}
            body ol{
            padding: 0;
            background-color: gray;
            transform: scaleY(0);
        }
        body .t1:hover ol{
           transform: scaleY(1);
        }
        .t1{
            color: white;
            float:left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
       
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2
        }

        th {
            background-color: rgb(213, 182, 23);
            color: white;
        }
        .ak{
          list-style-type: none;
          margin:0;
          padding:0;
          position:fixed;
          top:50px;
          border:aquamarine;
          border-radius: 10px;
          background: rgb(43, 144, 226);
          opacity:0.7;
          transition-delay: 50ms;
          transition-duration: 500ms;
          transition-property: left;
        }
        .ak:hover{
          left:5px;
          opacity: 2px;
          box-shadow:0px 0px 30px 30px green;
          transition-delay: 50ms;
          transition-duration: 500ms;
          transition-property: left;
        }
        .ak>li{
          width: 60px;
          height: 20px;
          display: inline-block;
        }
        .ak>li:first-child{
          float: right;
          width: 50px;
          height: 50px;
          margin: 2px;
        }
        .nav>li>a{
          display:block;
          text-decoration: none;
          font-size: 20px;
          line-height: 20px;
          padding:5px;
          color:coral;
          letter-spacing: 0.5em;
        }
        .nav>li>a:hover{color:red;}
  </style>
  
  <header>
    <img width="100%" heigth="500px" src="https://img2.baidu.com/it/u=1763698733,3040003375&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500">
    <p>网文千千万  爽文一级棒</p>
  </header>
  <body>
  <center>
    <nav>
      <ul>
          <div>
              <li class="t1"><a href="https://www.jxufe.edu.cn/">报告</a></li>
          </div>
          <div>
              <li class="t1"><a href="6.html">心得</a></li>
          </div>
          <div>
              <li class="t1"><a href="777.html">天行轶事</a></li>
          </div>
          <li class="t1">
              <div>分类</div>
              <ol>
        
        <li>穿越流</li>
        <li>重生流</li>
        <li>快穿流</li>
        <li>无敌流</li>
        <li>系统流</li>
        <li>反派流</li>
        <li>后宫流</li>
        <li>末世流</li>
              </ol>
          </li>
      </ul>
  </nav>
  </center>
  <table>
    
 <p><img width="205px" height="300px" src="https://img1.baidu.com/it/u=900581939,2894243157&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
 <img width="205px" height="300px" src="https://img1.baidu.com/it/u=2836725506,3143725192&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667">
 <img  width="205px" height="300px" src="https://img2.baidu.com/it/u=873562143,1727438391&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667">
 <img  width="205px" height="300px" src="https://img0.baidu.com/it/u=1373346261,2506878649&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=300">
 <img  width="205px" height="300px" src="https://img0.baidu.com/it/u=3539320051,3917371726&fm=253&fmt=auto&app=138&f=JPEG?w=189&h=272">
 <img  width="205px" height="300px" src="https://img1.baidu.com/it/u=2299939211,2552574941&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667">
 <img  width="205px" height="300px" src="https://img1.baidu.com/it/u=3777264500,634395322&fm=253&fmt=auto&app=120&f=JPEG?w=267&h=356">
 <img  width="205px" height="300px" src="https://img0.baidu.com/it/u=3353852238,3518203308&fm=253&fmt=auto&app=138&f=JPEG?w=498&h=705"></p>
 
 </table>
 
  <table>
    <tr>
        <th>爽文名称</th>
        <th>主角</th>
        <th>类型</th>
        <th>流派</th>
    </tr>
    <tr>
        <td>妖神记</td>
        <td>聂离</td>
        <td>沉稳型</td>
        <td>重生流</td>
    </tr>
    <tr>
        <td>逆天邪神</td>
        <td>云澈</td>
        <td>莽夫型</td>
        <td>后宫文</td>
    </tr>
    <tr>
        <td>网游之近战法师</td>
        <td>顾飞</td>
        <td>冷酷型</td>
        <td>游戏流</td>
    </tr>
    <tr>
        <td>全能装X系统</td>
        <td>牛炸天</td>
        <td>逗逼型</td>
        <td>装X流</td>
    </tr>

 </table>
          <ul class="ak">
            <li><img width="100px" height="50px" src="https://img0.baidu.com/it/u=2400488772,828412295&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=243" alt=""></li>
            <li>关于</li>
            <li>心得</li>
            <li>报告</li>
          </ul>
          
</body>
</html>